Vue.component('tab-debug', {
	template: `
		<div class="debugger">
			<div class="cfg" v-for="icfg in debugCfgs" :key="icfg.name">
				<span class="name">{{icfg.name}}：</span>
				<div class="vals">
					<span v-for="ival in icfg.valList" :key="icfg.name + ival"
							@click.stop="updateCfg(icfg, ival)"
							:class="valCls(icfg, ival)">
						{{ival}}
					</span>
				</div>
			</div>
		</div>
	`,
	data: function(){
		return {
			debugCfgs: [
				{
					name: 'hover',
					nowVal: 0,
					valList: [
						0, 1, 2, 3
					]
				},
				{
					name: 'select',
					nowVal: 0,
					valList: [
						0, 1
					]
				},
				{
					name: 'refresh',
					nowVal: 'execute',
					valList: [
						'execute'
					]
				},
				{
					name: 'view',
					nowVal: 'noText',
					valList: [
						'noText', 'validText', 'all'
					]
				},
				{
					name: 'drawer',
					nowVal: 'false',
					valList: [
						'false', 'true'
					]
				}
			]
		};
	
	},
	
	computed: {

	},

	methods: {
		valCls: function(cfg, val){
			return cfg.nowVal == val ? 'now' : 'none';
		
		},

		updateCfg: function(cfg, val){
			let self = this;
			if(cfg.name == 'refresh'){
				actions.sendUpdateSnapshotMsg();
				return;
			}
			if(cfg.name == 'drawer'){
				self.showDrawer = 'true' == val;
				console.log(self.showDrawer);
			}
			self.$nextTick(() => {
				self.$bus.$emit('cfg-change', {cfg: cfg, newVal: val});
				cfg.nowVal = val;
			});

		},

		getCfgVal: function(cfgName, defVal){
			let self = this;
			let cfgInfo = self.debugCfgs.find(e=>e.name == cfgName);
			return null == cfgInfo ? defVal : cfgInfo.nowVal;
		
		},

	},
	
	created: function(){
		let self = this;
		console.log('tab-debug created....');

		self.$bus.$on('node-hover', function(evtMsg){
			let cfgVal = self.getCfgVal('hover', 0);
			let type = 'over' == evtMsg.type ? 'addHighlight' : 'clearHighlight';
			let hoverMsg = {type: 'cmd', data: {name: type, data: evtMsg.node.id}};

			if(0 == cfgVal){
				return;
			}

			if(1 == cfgVal){
				if('addHighlight' == type){
					actions.sendMessage(hoverMsg);
				}
				return;
			}
			
			if(2 == cfgVal){
				if('clearHighlight' == type){
					actions.sendMessage(hoverMsg);
				}
				return;
			}
			
			actions.sendMessage(hoverMsg);

		});

		self.$bus.$on('node-clicked', function(evtMsg){
			//console.log('handle node clicked');
			//console.log(evtMsg);
			//self.lastClicked = evtMsg.event.target;

		});

	}

});